<template>
  <div>
    <div v-for="(is_data,mainIndex) in listItem" :key="mainIndex">
      <div class="pick_number">
        <div class="list_left">
          <div>{{is_data.match_name}}</div>
          <div>
            <span>{{is_data.changciWeek}}</span>
            {{is_data.Num}}
          </div>
          <div>{{is_data.overDateTime}} 截止</div>
        </div>
        <div class="list_right" :class="['is_type']+is_type">
          <div class="right_nav" :class="{'has_plus_awards':is_data.is_add_prize==1}">
            <div class="nav_left" v-if="is_type==7">让球</div>
            {{is_data.host}}
            <span>vs</span>
            {{is_data.guest}}
          </div>
          <!--混合过关-->
          <template v-if="is_type==7">
            <div
              class="type1_more"
              :class="{'has_number':is_statistics(mainIndex)!=0}"
              v-on:click.stop="$emit('more',is_data)"
            >
              <span v-if="is_statistics(mainIndex)==0">更多玩法</span>
              <span v-if="is_statistics(mainIndex)!=0">已选{{is_statistics((mainIndex))}}项</span>
            </div>
            <div class="type1_btn fist_h">
          
              <template  v-if="is_data.odds_2_all">
                <div class="item_btn number has_hot">0</div>
                <div
                  class="item_btn"
                  :class="{'is_choice':item.is_choice}"
                  v-for="(item,oddIndex) of is_data.odds_3_all"
                  v-on:click.stop="$emit('choice',item)"
                  :key="is_data.id+oddIndex"
                >
                  <label>{{kayMapVal(oddIndex)}}</label>
                  <span>{{item}}{{item.odds|format_number}}</span>
                </div>
              </template>
              <template v-else>
                <div class="item_btn all_width">未开售</div>
              </template>
            </div>
            <div class="type1_btn">
              <template v-if="is_data.odds_3_all">
                <div
                  class="item_btn number has_hot_n"
                  :class="{'has_reduce':is_data.rq<0,'has_add':is_data.rq>0}"
                >{{is_data.rq>0?'+'+is_data.rq:is_data.rq}}</div>
                <div
                  class="item_btn"
                  :class="{'is_choice':item.is_choice}"
                  v-for="(item,oddIndex) of is_data.odds_3_all"
                  v-on:click.stop="$emit('choice',item)"
                  :key="is_data.id+oddIndex"
                >
                  <label >{{kayMapVal(oddIndex)}}</label>
                  <span>{{item}}{{item.odds|format_number}}</span>
                </div>
              </template>
              <template v-else>
                <div class="item_btn all_width">未开售</div>
              </template>
            </div>
          </template>
          <!--让球胜平负-->
          <template v-else-if="is_type == 3">
            <template v-if="is_data.odds_3_state">
              <div class="type1_btn">
                <div
                  class="item_btn number"
                  :class="{'has_reduce':is_data.rq<0,'has_add':is_data.rq>0}"
                >{{is_data.rq>0?'+'+is_data.rq:is_data.rq}}</div>
                <div
                  class="item_btn"
                  :class="{'is_choice':item.is_choice}"
                  v-for="(item) in is_data.odds_3"
                  v-on:click.stop="$emit('choice',item)"
                  :key="is_data.id+'odds3'+item.value"
                >
                  {{item.text}}
                  <!-- <span>{{kayMapVal(item.odds)}}</span> -->
                </div>
              </div>
            </template>
            <template v-else>
              <div class="type1_btn all_width">未开售</div>
            </template>
          </template>
          <!--胜平负-->
          <template v-else-if="is_type == 2">
            <div class="type1_btn" v-if="is_data.odds_2_state">
              <div
                class="item_btn"
                :class="{'is_choice':item.is_choice}"
                v-for="(item) in is_data.odds_2"
                v-on:click.stop="$emit('choice',item)"
                :key="is_data.id+'odds2'+item.value"
              >
                {{item.text}}
                <span>{{item.odds|format_number}}</span>
              </div>
            </div>
            <div v-else class="type1_btn all_width">未开售</div>
          </template>
          <!--比分-->
          <template v-else-if="is_type == 4">
            <div
              class="type4_row"
              :class="{'text_lineheight2':type6_list.length>8 && type6_list.length<17,'text_lineheight3':type6_list.length>=17 && type6_list.length<24,'text_lineheight4':type6_list.length>=24}"
            >
              <template v-if="is_data.odds_4_state">
                <div
                  class="row_btn"
                  v-on:click.stop="$emit('more',is_data)"
                  v-if="type6_list.length==0"
                >点击展开比分投注</div>
                <div
                  class="row_btn btn_red"
                  v-on:click.stop="$emit('more',is_data)"
                  v-if="type6_list.length!=0"
                >
                  <template v-for="(item,index) in type6_list">
                    <template v-if="index!=0 && index%8 == 0"></template>
                    <span :key="is_data.id+'odds4'+item.value">{{item.text}}</span>
                  </template>
                </div>
              </template>
              <div v-else class="row_btn">未开售</div>
            </div>
          </template>
          <!--总进球-->
          <template v-else-if="is_type == 5">
            <template v-if="is_data.odds_5_state">
              <div class="type1_btn fist_h">
                <div
                  class="item_btn"
                  v-for="(item) in is_data.odds_5.slice(0,4)"
                  :class="{'is_choice':item.is_choice}"
                  v-on:click.stop="$emit('choice',item)"
                  :key="is_data.id+'odds5'+item.value"
                >
                  {{item.text}}
                  <span>{{item.odds|format_number}}</span>
                </div>
              </div>
              <div class="type1_btn">
                <div
                  class="item_btn"
                  v-for="(item,index) in is_data.odds_5.slice(4,8)"
                  :class="{'is_choice':item.is_choice}"
                  v-on:click.stop="$emit('choice',item)"
                  :key="is_data.id+'odds5'+item.value"
                >
                  {{item.text}}
                  <span>{{item.odds|format_number}}</span>
                </div>
              </div>
            </template>
            <div v-else class="type1_btn no_start">未开售</div>
          </template>
          <!--半全场-->
          <template v-else-if="is_type == 6">
            <div class="type4_row" :class="{'text_lineheight2':type6_list.length>5}">
              <template v-if="is_data.odds_6_state">
                <div
                  class="row_btn"
                  v-if="type6_list.length==0"
                  v-on:click.stop="$emit('more',is_data)"
                >点击展开半全场投注</div>
                <div
                  class="row_btn btn_red"
                  v-if="type6_list.length!=0"
                  v-on:click.stop="$emit('more',is_data)"
                >
                  <template v-for="(item,index) in type6_list">
                    <span :key="is_data.id+'odds6'+item.value">{{item.text}}</span>
                    <template v-if="index==4"></template>
                  </template>
                </div>
              </template>
              <div v-else class="row_btn no_start">未开售</div>
            </div>
          </template>
          <!--二选一-->
          <template v-else-if="is_type == 1">
            <div class="type1_btn" v-if="is_data.odds_7_state">
              <div
                class="item_btn"
                v-for="item in is_data.eitheror"
                :class="{'is_choice':item.is_choice}"
                v-on:click.stop="$emit('choice',item)"
                :key="is_data.id+'odds7'+item.value"
              >
                {{item.text}}
                <span>{{item.odds|format_number}}</span>
              </div>
            </div>
            <div v-else class="type1_btn no_start">未开售</div>
          </template>
          <template v-else></template>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: {
    is_type: { type: Number, default: 0 }, //玩法的类型
    listItem: { type: [Object, Array], default: null }
  },
  filters: {
    week_time(value, type) {
      if (!value) return "00:00";
      if (type) {
        return value.substring(2, 5);
      } else {
        return value.substring(0, 2);
      }
    }
  },
  computed: {
    is_types: function() {
      return 0;
    },
    //混合过关计算选择项数量
    is_statistics(index){
      
      return function(index) {
        let _this = this.listItem[index];
 
        let _number = 0;
        
        let _odds_2 = _this.odds_2_all;
        for (let i = 0; i < _odds_2.length; i++) {
          if (_odds_2[i].is_choice) {
            _number++;
          }
        }
        let _odds_3 = _this.odds_3_all;
        for (let i = 0; i < _odds_3.length; i++) {
          if (_odds_3[i].is_choice) {
            _number++;
          }
        }
        let _odds_4 = _this.odds_4_all;
        for (let i = 0; i < _odds_4.length; i++) {
          if (_odds_4[i].is_choice) {
            _number++;
          }
        }
        let _odds_5 = _this.odds_5_all;
        for (let i = 0; i < _odds_5.length; i++) {
          if (_odds_5[i].is_choice) {
            _number++;
          }
        }
        let _odds_6 = _this.odds_6_all;
        for (let i = 0; i < _odds_6.length; i++) {
          if (_odds_6[i].is_choice) {
            _number++;
          }
        }
        _number = _number > 9 ? _number : "0" + _number;
        return _number;
      };
    },
    //半全场 显示选择已选择项目
    type6_list: function() {
      let _data = [];
      let _is_type = this.is_type;
      let _odds;
      if (_is_type == 6) {
        _odds = this.is_data.odds_6;
      } else if (_is_type == 4) {
        _odds = this.is_data.odds_4;
      } else {
        console.log("this is bug", _is_type);
        return _data;
      }
      for (let i = 0; i < _odds.length; i++) {
        if (_odds[i].is_choice) {
          _data.push(_odds[i]);
        }
      }
      return _data;
    }
  },
  methods: {
    js_more: function(item, index) {
      this.$emit("js_more", item, index);
    },
    kayMapVal(value){
        if(this.is_type == 7){
            let val = ""
            switch(value){
                case '00':val = '客胜';break;
                case '01':val = '平';break;
                case '03':val = '主胜';break;
                default : val = '客胜';
            }
            return val;
        }

    }
  }
};
</script>
<style scoped lang="less">
.pick_number {
  position: relative;
  margin: 12px 0;
  padding: 0 15px;
  .list_left {
    @line-height:20px;
    position: absolute;
    left: 15px;
    top: 50%;
    height: @line-height * 3;
    margin-top: -7.5px ;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    span {
      padding-right: 10px;
    }
  }
  .list_right {
    margin-left: 75px;
    min-height: 100px;
  }
  .right_nav {
    position: relative;
    text-align: center;
    height: 38px;
    line-height: 38px;
    &.has_plus_awards {
      background-repeat: no-repeat;
      background-position: right 8px;
      background-size: 30px auto;
    }
    span {
      color: @theme-color;
      padding: 0 15px;
    }
  }
  .type1_btn {
    height: 66px;
    background-color: #fff;
    margin-right: 45px;
    overflow: hidden;
    .item_btn {
      @btn_w: 66px;
      position: relative;
      display: block;
      float: left;
      padding-top: 8px;
      font-size: 15px;
      height: @btn_w;
      width: @btn_w;
      text-align: center;

      &:after {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 1px;
        background-color: @theme-border-opacity;
        content: "";
      }
      span {
        padding-top: 8px;
        display: block;
      }
      &.is_choice {
        background-color: @theme-color;
        color: #fff;
        &:after,
        &:before {
          background-color: @theme-color;
        }
      }
      &.has_reduce {
        background-color: #2ecc71;
      }
      &.has_add {
        background-color: #ff7e00;
      }
      &.all_width {
        width: 100%;
        line-height: @btn_w;
        padding-top: 0;
        color: #999999;
        font-size: 16px;
      }
    }
    &.fist_h {
      .item_btn {
        &:before {
          position: absolute;
          left: 0;
          bottom: 0;
          right: 0;
          height: 1px;
          background-color: @theme-border-opacity;
          content: "";
        }
        &.is_choice {
          &:before {
            background-color: @theme-color;
          }
        }
      }
    }
  }
}

.is_type7,
.is_type3 {
  .nav_left {
    position: absolute;
    left: 0;
  }
  .item_btn {
    @btn_w: 65px;
    &.number {
      width: 22px !important;
      padding-top: 0;
      line-height: @btn_w;
      background-color: #c0c0c0;
      color: #fff;
      text-align: center;
      &:after {
        background-color: transparent;
      }
    }
  }
}
//混合过关
.is_type7 {
  //更多玩法
  .type1_more {
    @span_h: 40px;
    position: absolute;
    right: 15px;
    width: 50px;
    bottom: 0;
    top: 38px;
    font-size: 13px;
    color: #333333;
    background-color: #fff;
    span {
      position: absolute;
      height: @span_h / 2;
      line-height: @span_h / 2;
      top: 50%;
      left: 8px;
      right: 8px;
      margin-top: -@span_h / 2;
    }
    &.has_number {
      background-color: @theme-color;
      color: #fff;
    }
  }
}

//让球胜负平
.is_type3 {
  @btn_w: 78px;
  @btn_h: 60px;
  .type1_btn {
    margin-right: 0;
    height: @btn_h;

    &.all_width {
      line-height: @btn_h;
      text-align: center;
      color: #999999;
    }
    .item_btn {
      width: @btn_w;
      height: @btn_h;
      padding-top: 8px;
      &.number {
        padding-top: 0;
        line-height: @btn_h;
      }
      &:last-child {
        &:after {
          display: none;
        }
      }
    }
  }
}

//胜负平
.is_type2 {
  @btn_w: 65px;
  @btn_h: 60px;
  .type1_btn {
    margin-right: 0;
    height: @btn_h;
    &.all_width {
      line-height: @btn_h;
      text-align: center;
      color: #999999;
    }
    .item_btn {
      width: @btn_w;
      height: @btn_h;
      padding-top: 8px;
      &.number {
        padding-top: 0;
        line-height: @btn_h;
      }
    }
  }
}

//比分 半全场
.is_type4,
.is_type6 {
  .type4_row {
    @min-height: 70px;
    @line-height: 20px;
    @padding: 10px;
    @btn_height: @line-height + @padding*2;
    min-height: @min-height;
    padding-top: (@min-height - @btn_height)/2;
    font-size: 14px;
    &.text_lineheight2 {
      @btn_height_type2: @line-height*2 + @padding*2;
      padding-top: (@min-height - @btn_height_type2)/2;
      .row_btn {
        height: @btn_height_type2;
        padding-top: @padding;
        line-height: @line-height;
      }
    }
    &.text_lineheight3 {
      @btn_height_type3: @line-height*3 + @padding*2;
      padding-top: (@min-height - @btn_height_type3)/2;
      .row_btn {
        height: @btn_height_type3;
        padding-top: @padding;
        line-height: @line-height;
      }
    }
    &.text_lineheight4 {
      @btn_heights: @btn_height+5px;
      @btn_height_type4: @line-height*4 + @padding*2;
      padding-top: (@min-height - @btn_height_type4)/2;
      .row_btn {
        @padding: 8px;
        height: @btn_height_type4;
        padding-top: @padding;
        line-height: @line-height;
      }
    }
    .row_btn {
      background-color: #fff;
      height: @btn_height;
      line-height: @btn_height;
      text-align: center;
      border-radius: 20px;
      border: 1px solid @theme-border-opacity;
      &.btn_red {
        background-color: @theme-color;
        color: #fff;
      }
      &.no_start {
        color: #999999;
      }
    }
  }
}

//总近球
.is_type5 {
  .type1_btn {
    margin-right: 0;
    &.no_start {
      height: 65px;
      text-align: center;
      line-height: 65px;
      color: #999999;
    }
    .item_btn {
      @btn_w: 66px;
      width: @btn_w;
    }
  }
}

//二选一
.is_type1 {
  .type1_btn {
    margin-right: 0;
    &.no_start {
      line-height: 65px;
      color: #999999;
      text-align: center;
    }
    .item_btn {
      @btn_w: 135px;
      width: @btn_w;
    }
  }
}
</style>